<template>
  <n-card embedded
          :bordered="false"
          class="p-1"
          v-show="true">
    <h2>目录</h2>
    <n-divider></n-divider>
    <div class="w-48 h-96 ">
      <n-scrollbar trigger="none">
        <MdCatalog id="catalog" :editorId="'p'+id"
                   :theme=" theme as Themes"
                   :mdHeadingId="mdHeadingId"
                   :scroll-element="scrollElement"
                   :scrollElementOffsetTop="55"/>
      </n-scrollbar>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/module/app";
import {MdCatalog, Themes} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {computed} from "vue";

const {theme} = storeToRefs(useAppStore())

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  selectors: {
    type: String,
    default: '#pc > div.n-scrollbar-container'
  }
})
const mdHeadingId = (_text:any, _level:any, index:any) => `heading-${index}`;
const scrollElement = computed(() => {
  return document.querySelector(props.selectors) as string | HTMLElement
})



</script>

<style scoped>
.n-divider:not(.n-divider--vertica) {
  margin: 10px 0;
}

:deep( #catalog div span) {
  @apply text-base font-medium px-3 ;

  @apply border-l-4 border-gray-300;
  @apply rounded
}

:deep( #catalog div div span) {
  @apply text-sm font-medium ;
  @apply border-l-0;
}

:deep( #catalog div div div div span) {

}

:deep( #catalog div div div div div div span) {

}

</style>